<template>
	<view>
		<image src="../../static/backgroundpic.png" alt="" class="bgBackground">
		<span style="display: block;text-align: center;">登录</span>
		<view class="title">
			<span style="display: block;text-align: center;font-size: 1.2em;"><b>"馨语"</b></span>
			<span style="display: block;text-align: center;font-size: 1.2em;"><b>医学生心理危机</b></span>
			<span style="display: block;text-align: center;font-size: 1.2em;"><b>防御系统</b></span>
		</view>
		<view class="loginForm">
			<view class="uni-input-wrapper" style="margin:0 auto;">
				<input type="text" class="uni-input" maxlength="20" placeholder="用户名:" v-model="userForm.username" />
			</view>
			<view class="uni-input-wrapper" style="margin:0 auto;">
				<input password type="text" class="uni-input" maxlength="20" placeholder="密码:"
					v-model="userForm.password" />
			</view>
		</view>
		<view class="button">
			<button type="primary" @click="login"><b>登录</b></button>
			<view class="bottomword" style="margin-top: 10px;">
				<span style="margin-left: 50px;font-size: 0.8em;">忘记密码</span>
				<span style="float: right;margin-right: 60px;font-size: 0.8em;" @click="goToRegister">创建新用户</span>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapState,mapMutations} from 'vuex'
	export default {
		data() {
			return {
				// 用户信息表格
				userForm: {
					username: '',
					password: ''
				}
			}
		},
		methods: {
			async login() {
				console.log(this.userForm)
				uni.setStorageSync('uni_id_token','')
				uni.setStorageSync('username','')
				let res = await this.$axios.post(`/api/users/login`,this.userForm)
				// console.log(res)
				if(res.code===200){
					// console.log(res.data.user.username)
					uni.setStorageSync('uni_id_token',res.data.token)
					uni.setStorageSync('username',res.data.user.username)
					//this.loginStatus(true,res.data.user.username,res.data.token)
						// uni.switchTab({
						// 	url:`/pages/Home/index`
						// })
					if(res.data.user.teacher === false){
						uni.switchTab({
							url:`/pages/Home/index`
						})
					}else{
						uni.redirectTo({
							url:`/pages/Home/index2`
						})
					}
					
				}
			},
			goToRegister() {
				uni.navigateTo({
					// why?
					url: `/pages/Register/index/index`
				})
			},
			...mapMutations(['loginStatus'])
		}
	}
</script>

<style scope>
	.body {
		width: 350px;
	}

	.title {
		margin-top: 60px;
	}

	.uni-input {
		font-size: 15px;
		height: 40px;
		border-radius: 20px;
		border: 1px solid black;
		width: 250px;
		margin-top: 30px;
		margin-left: 80px;

	}

	.button>button {
		margin: 0 auto;
		width: 50%;
		margin-top: 30px;
		color: black;
		border-radius: 40px;
	}

	.loginForm {
		margin-top: 20px;
	}

	.bgBackground {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: -1;
	}
</style>
